How to integrate husky prettier etc in Vue project?

Create Project with vite

pnpm create vite-app vue3-ts

Install Dependencies

pnpm install husky lint-staged eslint prettier -D

Configure prettier

// .prettierrc.json
{
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "trailingComma": "all",
  "endOfLine": "auto"
}

you can format code using pnpx prettier --write .

Configure eslint

# inialize eslint 
pnpm create @eslint/config

The following optional, you can choose the same with me.

run the command pnpx eslint . to check eslint rules;

Install husky and Configure it

# init husty 
pnpm husky install
# Configure husky 
pnpx husky add .husky/pre-commit "pnpm lint-staged"

after run the command above, see your project like this, a underline directory and a pre-commit file auto created.

Wait a minute, another configuration need to configure.

// pakage.json
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
 "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },

Check the husky

Run the command following to commit some files

git add .

git commit -m 'test for husky'

You will see this in the console:

Congratulations, you succeed to use git commit trigger lint-stage.

This conclude eslint fix code and prettier format code.

To the End

Thanks for your time, If you get something from my article, please give me clap, meanwhile, feel free to ask question as you need.

协议

本作品代码部分采用 Apache 2.0协议 进行许可。遵循许可的前提下，你可以自由地对代码进行修改，再发布，可以将代码用作商业用途。但要求你：

• 署名：在原有代码和衍生代码中，保留原作者署名及代码来源信息。
• 保留许可证：在原有代码和衍生代码中，保留Apache 2.0协议文件。

本作品文档部分采用 知识共享署名 4.0 国际许可协议 进行许可。遵循许可的前提下，你可以自由地共享，包括在任何媒介上以任何形式复制、发行本作品，亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你：

• 署名：应在使用本文档的全部或部分内容时候，注明原作者及来源信息。
• 非商业性使用：不得用于商业出版或其他任何带有商业性质的行为。如需商业使用，请联系作者。
• 相同方式共享的条件：在本文档基础上演绎、修改的作品，应当继续以知识共享署名 4.0国际许可协议进行许可。